<template>
  <div>
    <el-table @row-click="tableclick" :header-cell-style="{ backgroundColor: '#f6f4fc' }" :data="b_tableData_3"
      class="b_tableData_3_box" @header-click="headerClick" height="798">
      <el-table-column prop="ranking" label="排名" align="center">
        <template slot-scope="scope">
          <div style="text-align: center">
            {{ scope.row.rank }}
          </div>
        </template>
      </el-table-column>

      <el-table-column prop="company" label="公司" align="center">
        <template slot-scope="scope">
          <span class="">
            {{ scope.row.company_info.company }}
            <!-- <el-tag class="b_bule1 red" v-if="!scope.row.company.is_support_visit" size="small">
              不支持走访
            </el-tag> -->
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="end" label="总数" align="center">
        <template slot="header" slot-scope="scope">
          <div :class="headerClickIndex == 0 ? 'ClickIndex' : ''">
            总数<i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <span :class="headerClickIndex == 0 ? 'ClickIndex' : ''">
            {{ scope.row.num }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="patent" label="发明专利" align="center">
        <template slot="header" slot-scope="scope">
          <div :class="headerClickIndex == 1 ? 'ClickIndex' : ''">
            发明专利<i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <span :class="headerClickIndex == 1 ? 'ClickIndex' : ''">
            {{ scope.row.patent }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="auth" label="发明授权"  width="100">
        <template slot="header" slot-scope="scope">
          <div :class="headerClickIndex == 2 ? 'ClickIndex' : ''">
            发明授权<i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <span :class="headerClickIndex == 2 ? 'ClickIndex' : ''">
            {{ scope.row.auth }}
          </span>
        </template>
      </el-table-column> -->
      <el-table-column prop="news" label="新型" align="center">
        <template slot="header" slot-scope="scope">
          <div :class="headerClickIndex == 2 ? 'ClickIndex' : ''">
            新型<i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <span :class="headerClickIndex == 2 ? 'ClickIndex' : ''">
            {{ scope.row.news }}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="apper" label="外观" align="center">
        <template slot="header" slot-scope="scope">
          <div :class="headerClickIndex == 3 ? 'ClickIndex' : ''">
            外观<i class="el-icon-caret-bottom"></i>
          </div>
        </template>
        <template slot-scope="scope">
          <span :class="headerClickIndex == 3 ? 'ClickIndex' : ''">
            {{ scope.row.apper }}
          </span>
        </template>
      </el-table-column>

      <el-table-column prop="street" label="标签" width="160" align="center">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.company_label.one"
              :key="scope.row.demand_id + item.honor.name + index">
            <el-tag class="b_bule" size="small" >
              {{ item.honor.name }}
            </el-tag>
          </div>

          <div v-for="(item, index) in scope.row.company_label.two"
              :key="scope.row.demand_id + item.name + index">
            <el-tag class="b_bule" size="small" >
              {{ item.name }}
            </el-tag>
          </div>

          <div v-for="(item, index) in scope.row.company_label.three"
              :key="scope.row.demand_id + item.name + index">
            <el-tag class="b_bule" size="small" >
              {{ item.name }}
            </el-tag>
          </div>

        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { visitDetailtwo, getCompanyId } from "@/api/newuser";

export default {
  components: {},
  props: {
    b_tableData_3: {
      type: Array,
      default: function () {
        return {
          label: Number,
          company: String,
          ranking: Number,
        };
      },
    },
    b_tableData_3_date: {
      type: String,
      default: function () {
        return "";
      },
    },
  },
  data() {
    return {
      headerClickIndex: 0,
    };
  },
  mounted() {
    // console.log(this.b_tableData);
  },
  methods: {
    headerClick(column, event) {
      if (column.label == "发明专利") {
        console.log(column, "发明专利");
        this.$emit("headerClick", 1);
        this.headerClickIndex = 1;
      } else if (column.label == "新型") {
        this.$emit("headerClick", 2);
        this.headerClickIndex = 2;
        console.log(column, "新型");
      } else if (column.label == "外观") {
        this.$emit("headerClick", 3);
        this.headerClickIndex = 3;
        console.log(column, "外观");
      } else if (column.label == "总数") {
        this.$emit("headerClick", 0);
        this.headerClickIndex = 0;
        console.log(column, "总数");
      }
    },
    tableclick(row) {
      getCompanyId({
        company: row.company_info.company,
      }).then((res) => {
        console.log(res);
        this.$router.push({
          path: "/workEnterprisevisit",
          query: {
            company_id: res.id,
            // company_name: row.company,
          },
        });
      });
      // console.log(row.company_info.company);

      //判断是否有走访记录
      // visitDetailtwo({
      //   company_id: row.company_id
      // }).then(res => {
      //   // console.log(res);
      //   if (res.list.length == 0) {
      //     this.$router.push(
      //       {
      //         path: '/addWaitvisit',
      //         query: {
      //           company_name: row.company_name,
      //           company_id: row.company_id,
      //         }
      //       }
      //     )
      //   } else {
      //     this.$router.push({
      //       path: '/workEnterprisevisit',
      //       query: {
      //         company_id: row.company_id,
      //       }
      //     })
      //   }
      // })
    },
  },
};
</script>

<style scoped lang="less">
.red {
  background-color: #ff5f58 !important;
  color: #fff !important;
}

.ClickIndex {
  color: #4995f4 !important;
}

.b_bule1 {
  background-color: #d3e2ff;
  margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
  text-align: center;
}

.b_bule {
  background-color: #d3e2ff;
  // margin: 3px 5px;
  border-radius: 5px;
  color: #4585ff;
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  border: 0;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  display: inline;
}

.item_list {
  display: inline-block;
  background-color: #d3e2ff;
  margin: 0px 5px;
  border-radius: 5px;
  padding: 0px 5px;
  color: #387dff;
  font-weight: initial;
  font-size: 10px;
}

.item_demand2 {
  background-color: #fff6f5;
  font-size: 14px;
  color: #ff5f58;
  border: 1px solid #ff5f58;
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}
</style>
